<template>

	<div>
		<el-form ref="form" :model="form" label-width="80px">
			<el-form-item label="小区名称">
				<el-input v-model="form.name"></el-input>
			</el-form-item>


			<el-form-item>
				<el-button type="primary" @click="find()">查询</el-button>
				<el-button type="primary" @click="quxiao()">取消</el-button>
			</el-form-item>
		</el-form>


		<el-button type="text" @click="dialogVisible = true">添加</el-button>

		<el-table :data="tableData" border style="width: 100%">
			<el-table-column fixed prop="id" label="ID" width="150">
			</el-table-column>
			<el-table-column prop="name" label="小区名称" width="120">
			</el-table-column>
			<el-table-column prop="coverArea" label="coverArea" width="120">
			</el-table-column>
			<el-table-column prop="buildArea" label="buildArea" width="120">
			</el-table-column>
			<el-table-column prop="ownersNumber" label="ownersNumber" width="300">
			</el-table-column>
			<el-table-column prop="communityIntroduction" label="communityIntroduction" width="120">
			</el-table-column>
			<el-table-column fixed="right" label="操作" width="100">
				<template slot-scope="scope">
					<el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
					<el-button @click="delClick(scope.row)" type="text" size="small">删除</el-button>
					<el-button type="text" size="small"></el-button>
				</template>
			</el-table-column>
		</el-table>



		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="currentPage4" :page-sizes="[10, 20, 30, 40]" :page-size="10"
			layout="total, sizes, prev, pager, next, jumper" :total="totalData">
		</el-pagination>




		<el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">



			<el-form ref="form" :model="form" label-width="80px">
				<el-form-item label="buildArea">
					<el-input v-model="form.buildArea"></el-input>
				</el-form-item>
				<el-form-item label="communityIntroduction">
					<el-input v-model="form.communityIntroduction"></el-input>
				</el-form-item>

				<el-form-item label="coverArea">
					<el-input v-model="form.coverArea"></el-input>
				</el-form-item>
				<el-form-item label="id">
					<el-input v-model="form.id"></el-input>
				</el-form-item>
				<el-form-item label="name">
					<el-input v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item label="ownersNumber">
					<el-input v-model="form.ownersNumber"></el-input>
				</el-form-item>

				<el-form-item>
					<el-button type="primary" @click="save()">添加</el-button>
					<el-button>取消</el-button>
				</el-form-item>
			</el-form>




			<el-button @click="dialogVisible = false">取 消</el-button>
			<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
			</span>
		</el-dialog>


	</div>

</template>

<script>
	import axios from "axios"
	export default {
		methods: {
			handleClick(row) {
				console.log(row);
				let id = row.id;
				console.log(id)

				this.$router.push({
					path: '/residentialQuartersInfo/' + id
				})



			},
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},

			delClick(row) {
				console.log(row);
				let id = row.id;
				console.log(id)
				//delResidentialQuarters
				axios.get('http://localhost:9071/residentialquarters/delResidentialQuarters/' + id).then(res => {
					if (res.data.code == 1) {
						alert("删除成功");
						this.loadList();
					}
				})
			},
			find() {
				this.loadList();
			},
			quxiao() {
				this.form.name = '',
					this.loadList();
			},

			save() {
				//
				axios.post('http://localhost:9071/residentialquarters/saveResidentialQuarters', this.form).then(res => {
					if (res.data.code == 1) {
						alert("添加成功");
						this.dialogVisible = false;
						this.loadList();
					}
				})
			},
			loadList() {
				let token = localStorage.getItem("token");

				console.log("---------")
				console.log("token:" + token)

				axios.post('http://localhost:2001/api-rq/residentialquarters/findResidentialQuartersPage?page=' + this.page +
					'&size=' + this.size, this.form, {
						headers: {
							"token": token
						}
					}).then(res => {
					if (res.data.code == 1) {
						this.tableData = res.data.data.records;
						this.totalData = res.data.data.total;
					}
				})
			},

			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.size = val;
				this.loadList();
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.page = val;
				this.loadList();
			}
		},
		created() {
			let token = localStorage.getItem("token");
			if(token==""||token==null){
				this.$router.push({path:'/login'})
			}
			this.loadList();
		},

		data() {
			return {
				tableData: [],
				form: {
					buildArea: '',
					communityIntroduction: '',
					coverArea: '',
					id: '',
					imageUrl: '',
					name: '',
					ownersNumber: ''
				},
				totalData: '',
				page: 1,
				size: 10,
				dialogVisible: false
			}
		}
	}
</script>

<style>
</style>